<template>
  <div>
    <goga-header title="充值记录">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
      <div slot="right">
        <router-link :to="{name:'deposit-rule'}">规则</router-link>
      </div>
    </goga-header>
    <div  class="deposit-wrapper">
      <img v-if="loading" class="gxb-loading" src="/public/images/loding.gif" alt="">
      <div class="deposit-top-box">
        <img src="../../assets/logo-02.png" alt="" class="logo-02">
        <div class="p-money">
          账户余额：¥{{getBlance}}
        </div>
      </div>
      <div class="deposit-tit">
        套餐选择
      </div>
      <div class="deposit-plan">
        <div class="item" v-for="(item, $index) in rewardList" :class="{'active': planIndex==$index}" @click="planIndex=$index">
          <div class="p-money" >
            {{item.rrMoney}}¥
          </div>
          <div class="p-send">
            充值{{item.rrMoney}}送{{item.rrReward}}
          </div>
          <div class="p-name">
            {{item.rrName}}
          </div>
          <div class="p-choose">
            <icon symbol="check"></icon>
          </div>
        </div>

      </div>
      <div class="deposit-pay">
        <div class="item" v-if="!isWechat">
          <div class="p-name">
            <i class="pay-icon zfb"></i>支付宝支付
          </div>
          <div class="p-choose">
            <icon symbol="check"></icon>
          </div>
        </div>
        <div class="item" v-if="isWechat">
          <div class="p-name">
            <i class="pay-icon wx"></i>微信支付
          </div>
          <div class="p-choose">
            <icon symbol="check"></icon>
          </div>
        </div>
      </div>
      <div class='btn-bottom'>
        <button @click='pay()' class="btn" :disabled="btnDisabled"><span v-if="!btnDisabled">前往支付</span><span v-if="btnDisabled">处理中,请稍等</span></button>
      </div>
    </div>
    <transition name="rule">
      <router-view ></router-view>
    </transition>
  </div>
</template>

<script lang="babel">
  import api from '@api'
  import {isWechat, cookie, wechatConfig} from '@utils'
  import {mapGetters} from 'vuex'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'

  const fetchBlance =async function (store) {
    store.dispatch('backend/management/getBalance')
  }
  export default {
    components: {
      gogaHeader,
      Icon
    },
    data() {
      return {
        isWechat: false,
        rewardList: [],
        planIndex: 0,
        btnDisabled: false,
        oriderId: 0,
        loading: false
      }
    },
    computed: {
      ...mapGetters({
        isLogin: 'global/user/isLogin',
        getBlance: 'backend/management/getBalance'
      })
    },
    async mounted() {
      this.oriderId = this.$route.query.id || 0;
      this.isWechat = isWechat();
      if(this.getBlance == 0) {
        fetchBlance(this.$store);
      }
      await this.getRewardList();
      if(isWechat()) {
        wechatConfig();
      }

    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      async getRewardList () {
        let {data: {StatusCode, reachargeRewardList}} = await api.get('api/v1/UserInfo/rechargeRewardList.ashx');
        if (StatusCode === '200') {
          this.rewardList = reachargeRewardList
        }
      },
      pay () {
        if (this.isWechat) {
          this.wechatCall()
        } else {
          this.alipayCall()
        }
      },
      async wechatCall() {
        let self = this
        let money = this.rewardList[this.planIndex].rrMoney
        this.btnDisabled = true
        this.oriderId = this.$route.query.orderID || 0
        this.loading = true;
        let {data} = await api.post('api/v1/UserInfo/rechargePay.ashx', {rMoney: money})
        if( window.wx) {
          window.wx.chooseWXPay({
            timestamp: data.timeStamp,
            nonceStr: data.nonceStr,
            package: data.package,
            signType: data.signType,
            paySign: data.paySign,
            success: function (res) {
              this.$store.dispatch('global/toast', '充值成功');
              self.goback()
            },
            cancel: function () {
              self.btnDisabled = false
              self.loading = false;
            }
          })
        }

      },
      alipayCall () {
        let money = this.rewardList[this.planIndex].rrMoney
        window.location.href = 'https://shop.gogagoga.cc/wapAlipay/payRecharge.aspx?orderSn=' + this.oriderId + '&rMoney=' + money + '&token=' + cookie('TOKEN');
      }
    }
  }
</script>

<style lang="less">
@import "index.less";
</style>
